<template>
	<view class="wrap" style="padding-bottom: 60px;">
		<!-- <u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
		<view class="search">
			<u-search v-model="queryParam.orderParams" @custom="search" @search="search"></u-search>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="top" @down="downCallback" @up="loadData">
			<view v-for="(item,index) in list" :key="item.id">
				<u-card @click="navTo('/pages/sys/workbench/accessoryInfoDetails',item)" class="task-list-item"
					:border="false" padding="20" margin="20rpx">
					<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
						<view style="display: flex;align-items: center;font-size: 30rpx;">{{item.accessoryNumber || ''}}</view>
						<view style="color: #999999;font-size: 22rpx;">{{item.createTime || ''}}</view>
					</view>
					<view class="" slot="body">
						<u-row gutter="16">
							<u-col span="12">
								<!-- <view class="apply-text"><span>项目号：</span>100001001</view> -->
								<view class="apply-text"><span>地址：</span>{{item.address || ''}}</view>
								<view class="apply-text">
									<span>引用状态：</span>
									<span v-if="!item.orderId">未引用</span>
									<span v-else>已引用</span>
								</view>
								<view class="apply-text"><span>业主电话：</span>{{item.phone || ''}}</view>
								<view class="apply-text"><span>备注：</span>{{item.remark || ''}}</view>
								<view style="padding: 20rpx;">
									<image @click.stop="previewImage(child)" class="user-images" v-for="(child,idx) in getImages(item)" :src="child" :key="index"></image>
								</view>
							</u-col>
						</u-row>
					</view>
					<!-- <view class="apply-list-foot" slot="foot" style="text-align: right;color: #58ca93;">
						审批通过
					</view> -->
				</u-card>
			</view>
		</mescroll-uni>
		
		<uni-fab ref="fab" :show="true" :pattern="pattern" horizontal="right" direction="horizontal" @fabClick="fabClick" >
			<view style="font-size: 32rpx;color: white;">
				+
			</view>
		</uni-fab>
	</view>

</template>

<script>
	import MescrollMixins from '@/components/mescroll-uni/mescroll-mixins';
	import UniFab from '@/components/uni-fab/components/uni-fab/uni-fab.vue';
	import ListMxin from './mixins/ListMxin';
	
	import {
		stringify
	} from '@/common/common';
	export default {
		mixins: [MescrollMixins, ListMxin],
		components: {
			UniFab
		},
		data() {
			return {
				queryParam: {
					orderParams: '', //搜索条件查询
					// orderNumber //单据查询
					// installerStatus: 0, //状态 0-待接单 1-待配送 2-已配送
					// installerType: 2, //类型 1-配送  2-安装
					// status: '0'
				},
				tabList: [{
					name: '未引用'
				}, {
					name: '已引用',
				}],
				pattern: {
					color: 'gray',
					backgroundColor: '#FFFFFF',
					iconColor: '#FFFFFF',
					selectedColor: '#007AFF',
					buttonColor: '#409eff'
				},
				current: 0,
				show: false,
				url: {
					list: 'bizOrderAccessoryList'
				},
				list: []
			}
		},
		created() {

		},
		
	
		computed: {
			top() {
				return this.CustomBar 
			},
		},
		methods: {
				comfirm(item) {
					if(+item.installerStatus >=1) return 
					let that = this;
					uni.showModal({
						title: '提示',
						content: `确认接受此安装任务？`,
						success: (res)=>{
							if (res.confirm) {
								let param ={
									installerStatus: this.current + 1,
									id:item.installerId,
								}
								this.$u.api.updateInstallStatus(param).then(res=>{
									console.log(res);
									if(res.code == 200){
										this.$u.toast('操作成功！')
										setTimeout(()=>{
											this.change(this.current + 1)
										},1500)
									}
								})
							}
						}
					});
				},
			change(index) {
				this.list = []
				this.current = index;
				this.queryParam.installerStatus = index
				this.loadData({
					num: 1,
					size: 10
				})
			},
			
			navTo(url,item) {
				let query = stringify(item)
					uni.navigateTo({
						url: `${url}?${query}` 
					});
			},
			fabClick(){
				uni.navigateTo({
					url: '/pages/sys/workbench/accessoryInfoDetails' 
				});
				
			},
			/**
			 * 组装参数
			 */
			getQueryParams() {
				let params = Object.assign({}, this.queryParam)
				return params
			},
			
		}

	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.apply-text {
		font-size: 28rpx;
		color: #333333;

		span {
			color: #999999;
		}
	}

	.user-images {
		width: 80px;
		height: 80px;
		margin-right: 8px;
	}

	.apply-list-foot {
		font-size: 28rpx;
	}

	.personnel-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.personnel-user {
			position: relative;
			margin: 5px 9px 0;
		}

		.user-images {
			width: 48px;
			height: 48px;
			margin-right: 0;

		}

		.iconfont {
			position: absolute;
			top: -12px;
			right: -5px;
			color: #FE0100;
		}
	}
</style>